<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>
<!--
  组件的命名规则
    定义组件名的方式有两种：
      1. kebab-case
            当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case
      2.使用 PascalCase
         当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
         也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
         注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的


-->
<div id="app">
<!--    <student-view></student-view>-->
<!--    &lt;!&ndash;    直接DOM 不能使用PascalCase&ndash;&gt;-->
<!--    <StudentView></StudentView>-->
</div>

<script>
    // 学生组件
    const student = {
        template: `
            <div>
                <h1>学生信息</h1>
                <p>姓名:张三</p>
                <p>年龄:20</p>
                <p>班级:python2512</p>
            </div>
        `
    }
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        template:`
          <div>
            <student-view></student-view>
            <StudentView></StudentView>
          </div>
        `,
        components: {
            // 'student-view':student
            StudentView: student
        }
    })
</script>

</body>
</html>
